<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"  import="java.util.*"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var url = "";
function newObject(){
	$("#dlgAdd").dialog("open").dialog("setTitle","Open dialog add new");
	$("#fmAdd").form("clear");
	url = "KhoiKienThucServlet?flag=add";
}
	
function editObject(){
	var row = $("#tt").datagrid("getSelected");
	if (row){
		$("#dlg").dialog("open").dialog("setTitle","Open dialog edit");
		$("#fm").form("load",row);
		url = "KhoiKienThucServlet?flag=edit";
	} else {
		alert("Bạn chưa chọn dữ liệu cần cập nhật！");
	}
}
	
function searchObject(){
	$('#tt').datagrid('load',{
		searchTen: $('#searchTen').val(),
	});
}
	
function removeObject(){
	//var rows = $("#tt").datagrid("getSelected");
	var ids = [];
	var rows = $('#tt').datagrid('getSelections');
	for(var i=0; i<rows.length; i++){
		ids.push(rows[i].id_khoi_kien_thuc);
	}
	if (rows!=""){
		$.messager.confirm("Confirm","Bạn muốn xóa mẩu tin này?",function(r){
		if (r){
			$.post("KhoiKienThucServlet?flag=remove", {
					//id : row.id_khoi_kien_thuc
					id : ids.join(',')
				}, function(result) {
					if (result.success) {
							$("#tt").datagrid("reload"); // reload the user data
							$.messager.show({
								title: "Delete",
								msg: result.msg
							});
					} else {
						$.messager.show({
							title: "Error !",
							msg: result.msg
						});
					}
				}, "json");
			}
		});
	}else {
		alert("Bạn chưa chọn dữ liệu cần xóa！");
	}
}
	
function saveObject(){
	$("#fm").form("submit",{
		url: url,
		onSubmit: function(){
			return $(this).form("validate");
		},
		success: function(result){
			var r = eval("("+result+")");
			if (r.success){
				$("#dlg").dialog("close"); // close the dialog
				$("#tt").datagrid("reload"); // reload the user data
				$.messager.show({
					title: "Update",
					msg: r.msg
				});
			} else {
				$.messager.show({
					title: "Error !",
					msg: r.msg
				});
			}
		}
	});
}

function saveAddObject(){
	$("#fmAdd").form("submit",{
		url: url,
		onSubmit: function(){
			return $(this).form("validate");
		},
		success: function(result){
			var r = eval("("+result+")");
			if (r.success){
				$("#dlgAdd").dialog("close"); // close the dialog
				$("#tt").datagrid("reload"); // reload the user data
				$.messager.show({
					title: "Update",
					msg: r.msg
				});
			} else {
				$.messager.show({
					title: "Error !",
					msg: r.msg
				});
			}
		}
	});
}

//check so tin chi
$.extend($.fn.validatebox.defaults.rules, {  
    tinChi: {  
        validator: function(value,param){
        	return 1;//value == parseInt($(param[0]).val()) - ( parseInt($('#so_tc_dk1').val()) + parseInt($('#so_tc_dk2').val())+ parseInt($('#so_tc_dk3').val()));
        },  
        message: 'Tổng số tín chỉ 3 loại kiến thức = Tổng số tín chỉ.'
    }  
});

jQuery(function(){
	$("#searchTen").autocomplete("search/searchCTGD.jsp");
});

</script>

<script type="text/javascript">
    var xmlHttp=null;
    function getXMLHttpRequest()
    {
    	try
    	{
    		xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
    	}
    	catch (ex)
    	{
    		try
    		{
    			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//Explorer 6.0+
    		}
    		catch (ex)
    		{
    			try
    			{
    				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//Explorer 5.5+
				} catch (ex) {
					return false;
				}
			}
		}
		return xmlHttp;
	}
    
	function checkExists(id_loai_khoi_kien_thuc1,id_loai_khoi_kien_thuc2,id_loai_khoi_kien_thuc3) {
		xmlHttp = getXMLHttpRequest();
		var msg = document.getElementById("maMessage");
		if (xmlHttp != null) {
			xmlHttp.onreadystatechange = function() {
				if (xmlHttp.readyState == 4) {
					if (xmlHttp.status == 200) {
						var check = xmlHttp.responseText;
						if (check == 0) {
							msg.innerHTML = "";
							document.getElementById("dlg-buttons-Add").style.visibility = "visible";
						} else if (check == 1) {
							msg.innerHTML = "Loại khối kiến thức không được trùng nhau";
							document.getElementById("dlg-buttons-Add").style.visibility = "hidden";
						};
					} else {
						msg.innerHTML = "Server đang bận ...";
					}
				} else {
					msg.innerHTML = "Đang kiểm tra ...";
				};
			};
			var url = "view/checkLoaiKhoiKienThuc.jsp?id_loai_khoi_kien_thuc1=" + id_loai_khoi_kien_thuc1  + "&id_loai_khoi_kien_thuc2=" + id_loai_khoi_kien_thuc2 + "&id_loai_khoi_kien_thuc3=" + id_loai_khoi_kien_thuc3 +"&id=" + Math.random();
			xmlHttp.open("GET", url, true);
			xmlHttp.send(null);
		} else {
			alert("Trình duyệt không hỗ trợ Ajax");
			return false;
		}
	} 
	
	   $(function(){  
	        $('#id_loai_khoi_kien_thuc1').combobox({  
	            onChange:function (newValue, oldValue){  
	                if(newValue !=null){  
	                    document.getElementById("id1").value = newValue;
	                    checkExists(id1.value, id2.value, id3.value); 
	                }  
	            }  
	        });  
	    });
	   
	   $(function(){  
	       $('#id_loai_khoi_kien_thuc2').combobox({  
	           onChange:function (newValue, oldValue){  
	               if(newValue !=null){  
	            	   document.getElementById("id2").value = newValue;
	            	   checkExists(id1.value, id2.value, id3.value); 
	               }  
	           }  
	       });  
	   });
	   
	   $(function(){  
	       $('#id_loai_khoi_kien_thuc3').combobox({  
	           onChange:function (newValue, oldValue){  
	               if(newValue !=null){  
	            	   document.getElementById("id3").value = newValue;
	            	   checkExists(id1.value, id2.value, id3.value); 
	               }  
	           }  
	       });  
	   });
	   
	   $(function(){  
	        $('#id_ctgd').combobox({  
	            onChange:function (newValue, oldValue){  
	                if(newValue !=null){  
	                	$('#tt').datagrid('load', {
	            			id : newValue,
	            		});
	                }  
	            }  
	        });  
	    });
	   
	   $(function(){
			$('#tt').datagrid({  
			    view: detailview,  
			    detailFormatter:function(index,row){  
			        return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';  
			    },  
			    onExpandRow: function(index,row){  
			        $('#ddv-'+index).datagrid({  
			            url:'view/detailKhoiKienThuc.jsp?id='+row.id_khoi_kien_thuc,  
			            fitColumns:true,  
			            singleSelect:true,  
			            rownumbers:true,  
			            loadMsg:'',  
			            height:'auto',
			            columns:[[   
			                {field:'ma_mon_hoc',title:'Mã Môn'},  
			                {field:'ten_mon_hoc',title:'Tên Môn Học'},  
			                {field:'so_tc',title:'Số TC'}, 
			                {field:'so_tiet_lt',title:'Số tiết LT'} ,
			                {field:'so_tiet_th',title:'Số tiết TH'},
			                {field:'ten_nhom_mon_hoc',title:'Nhóm Môn Học'}
			            ]],  
			            onResize:function(){  
			                $('#tt').datagrid('fixDetailRowHeight',index);  
			            },  
			            onLoadSuccess:function(){  
			                setTimeout(function(){  
			                    $('#tt').datagrid('fixDetailRowHeight',index);  
			                },0);  
			            }  
			        });  
			        $('#tt').datagrid('fixDetailRowHeight',index);  
			    }  
			});
		}); 
</script>
<style type="text/css">
#fm {
	margin: 0;
	padding: 5 0px;
}

.ftitle {
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.fitem {
	margin-bottom: 7px;
}

.fitem label {
	display: inline-block;
	width: 190px;
}

.fitem input {
	display: inline-block;
	width: 290px;
	background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #888888;
    border-radius: 5px 5px 5px 5px;
    color: #222222;
    margin: 0 5px 0 0;
    padding: 3px 4px;
}
</style>
</head>
<body>
	<table id="tt" class="easyui-datagrid" 
			style="width:795px;height:574px"
			url="KhoiKienThucServlet"
			title=":: KHỐI KIẾN THỨC" toolbar="#tb"
			rownumbers="true" pagination="true" singleSelect="false" fitColumns="true">
		<thead>
			<tr>
				<th field="ck" checkbox="true"></th>
				<th field="ten">Tên Khối Kiến Thức</th>
				<th field="so_tc_bb">Số TC Bắc Buộc</th>
				<th field="so_tc_tc">Số TC Tự Chọn</th>
				<th field="so_tc_dk">Số TC Điều Kiện</th>
				<th field="ten_day_du">Chương Trình Giảng Dạy</th>
				<th field="ten_lkkt">Loại Khối Kiến Thức</th>
			</tr>
		</thead>
	</table>
	
	<div id="tb" style="padding:5px">
		<div>
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newObject()">Thêm</a> 
			<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editObject()">Sửa</a> 
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeObject()">Xóa</a>
		</div>
		<div style="padding:5px">
			<div class="fitem">
				<input id="id_ctgd" name="id_ctgd" class="easyui-combobox" style="width: 320px; height: 25px;"
				 	data-options="
					 			  url:'view/loadCTGD.jsp',
					              valueField:'id',
					              textField:'ten',
					              panelHeight:'250'
								  "/>
				<a href="#" class="easyui-linkbutton" plain="true">Chọn CTGD</a>
			</div>
			<input class="search" id="searchTen" name="searchTen" type="text" placeholder="nhập tên chương trình giảng dạy">
			<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-searchs" onclick="searchObject()">Tìm Kiếm</a>
		</div>
	</div>
	
	<div id="dlg" class="easyui-dialog"
		style="width: 580px; height: 310px; padding: 10px 20px" closed="true"
		buttons="#dlg-buttons">
		<div class="ftitle">KHỐI KIẾN THỨC</div>
		<form id="fm" method="post">
			<div class="fitem" >
				<input type="hidden" name="id_khoi_kien_thuc" class="easyui-validatebox">
			</div>
					
			<div class="fitem">
				<label>CTGD:</label> 
				<input name="id_ctgd" class="easyui-combobox" required="true" style="width:300px; height: 25px"
				url="view/loadCTGD.jsp"
            	valueField="id"
            	textField="ten"
            	panelHeight="250"
            	value="ten_day_du">
			</div>
			
			<div class="fitem">
				<label>Loại Khối Kiến Thức:</label> 
				<input name="id_loai_khoi_kien_thuc" class="easyui-combobox" required="true" style="width:300px; height: 25px"
				url="view/loadLoaiKhoiKienThuc.jsp"
            	valueField="id"
            	textField="ten"
            	panelHeight="250"
            	value="ten"
            	>
			</div>
			
			<div class="fitem">
				<label>Tên Khối Kiến Thức:</label> 
				<input type="text" id="ten" name="ten" class="easyui-validatebox" required="true">
			</div>	
			
			<div class="fitem">
				<label>Số TC Bắc Buộc:</label> 
				<input type="text" name="so_tc_bb" class="easyui-numberbox" data-options="required:true, min:0" placeholder="nhập số >= 0">
			</div>
			
			<div class="fitem">
				<label>Số TC Tự Chọn:</label> 
				<input type="text" name="so_tc_tc" class="easyui-numberbox" data-options="required:true, min:0" placeholder="nhập số >= 0">
			</div>
			
			<div class="fitem">
				<label>Số TC Điều Kiện:</label> 
				<input type="text" name="so_tc_dk" class="easyui-numberbox" data-options="required:true, min:0" placeholder="nhập số >= 0">
			</div>
		</form>
	</div>
	
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveObject()">Lưu</a> 
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Hủy Bỏ</a>
	</div>
	
	
	<!-- Add Khoi Kien Thuc -->
	<div id="dlgAdd" class="easyui-dialog"
		style="width: 580px; height: 700px; padding: 10px 20px" closed="true"
		buttons="#dlg-buttons-Add">
		<div class="ftitle">KHỐI KIẾN THỨC</div>
		<form id="fmAdd" method="post">
			
			<div class="fitem">
				<label>CTGD:</label> 
				<input name="id_ctgd" class="easyui-combobox" style="width:300px; height: 25px"            	
            	data-options="required:'true',
					 			  url:'view/loadCTGD.jsp',
					              valueField:'id',
					              textField:'ten',
					              panelHeight:'250',
					              value:'ten_day_du',
								  onSelect: function(rec){
								  	document.getElementById('tong_so_tc').value = rec.so_tc;
								  }
								  "/>
			</div>
			
			<div class="fitem" >
				<label>Tổng Số Tín Chỉ:</label> 
				<input type="text" readonly="readonly" id = "tong_so_tc" name="tong_so_tc" class="easyui-validatebox">
			</div>
			
			<hr>
			<div class="fitem">
				<label>Loại Khối Kiến Thức 1:</label> 
				<input id="id_loai_khoi_kien_thuc1" name="id_loai_khoi_kien_thuc1" class="easyui-combobox" required="true" style="width:300px; height: 25px"
				url="view/loadLoaiKhoiKienThuc.jsp"
            	valueField="id"
            	textField="ten"
            	panelHeight="250"
            	value="ten"
            	>
			</div>
			<div class="fitem">
				<input type="text" name="id1" id="id1" style="display: none" class="easyui-validatebox" value="">
			</div>
			
			<div class="fitem">
				<label>Tên Khối Kiến Thức 1:</label> 
				<input type="text" id="ten1" name="ten1" class="easyui-validatebox" required="true">
			</div>	
			<div class="fitem">
				<label>Số TC Bắc Buộc:</label> 
				<input type="text" id="so_tc_bb1" name="so_tc_bb1" class="easyui-numberbox" data-options="required:true, min:0" placeholder="nhập số >= 0">
			</div>		
			<div class="fitem">
				<label>Số TC Tự Chọn:</label> 
				<input type="text" id="so_tc_tc1" name="so_tc_tc1" class="easyui-numberbox" data-options="required:true, min:0" placeholder="nhập số >= 0">
			</div>
			<div class="fitem">
				<label>Số TC Điều Kiện:</label> 
				<input type="text" id= "so_tc_dk1" name="so_tc_dk1" value="0" class="easyui-numberbox" data-options="required:true, min:0" placeholder="nhập số >= 0">
			</div>
			
			<hr>
			<div class="fitem">
				<label>Loại Khối Kiến Thức 2:</label> 
				<input id="id_loai_khoi_kien_thuc2" name="id_loai_khoi_kien_thuc2" class="easyui-combobox" required="true" style="width:300px; height: 25px"
				url="view/loadLoaiKhoiKienThuc.jsp"
            	valueField="id"
            	textField="ten"
            	panelHeight="250"
            	value="ten"
            	>
			</div>
			<div class="fitem">
				<input type="text" name="id2" id="id2" style="display: none" class="easyui-validatebox" value="">
			</div>
			<div class="fitem">
				<label>Tên Khối Kiến Thức 2:</label> 
				<input type="text" id="ten2" name="ten2" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Số TC Bắc Buộc:</label> 
				<input type="text" id="so_tc_bb2" name="so_tc_bb2" class="easyui-numberbox" data-options="required:true, min:0" placeholder="nhập số >= 0">
			</div>
			<div class="fitem">
				<label>Số TC Tự Chọn:</label> 
				<input type="text" id="so_tc_tc2" name="so_tc_tc2" class="easyui-numberbox" data-options="required:true, min:0" placeholder="nhập số >= 0">
			</div>
			<div class="fitem">
				<label>Số TC Điều Kiện:</label> 
				<input type="text" id="so_tc_dk2" name="so_tc_dk2" value="0" class="easyui-numberbox" data-options="required:true, min:0" placeholder="nhập số >= 0">
			</div>
			
			<hr>
			<div class="fitem">
				<label>Loại Khối Kiến Thức 3:</label> 
				<input id="id_loai_khoi_kien_thuc3" name="id_loai_khoi_kien_thuc3" class="easyui-combobox" required="true" style="width:300px; height: 25px"
				url="view/loadLoaiKhoiKienThuc.jsp"
            	valueField="id"
            	textField="ten"
            	panelHeight="250"
            	value="ten"
            	>
			</div>
			<div class="fitem">
				<input type="text" name="id3" id="id3" style="display: none" class="easyui-validatebox" value="">
			</div>
			<div class="fitem">
				<label>Tên Khối Kiến Thức 3:</label> 
				<input type="text" id="ten3" name="ten3" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Số TC Bắc Buộc:</label> 
				<input type="text" id="so_tc_bb3" name="so_tc_bb3" class="easyui-numberbox" data-options="required:true, min:0" placeholder="nhập số >= 0">
			</div>
			<div class="fitem">
				<label>Số TC Tự Chọn:</label> 
				<input type="text" id="so_tc_tc3" name="so_tc_tc3" class="easyui-numberbox" data-options="required:true, min:0" placeholder="nhập số >= 0">
			</div>	
			<div class="fitem">
				<label>Số TC Điều Kiện:</label> 
				<input type="text" id="so_tc_dk3" name="so_tc_dk3" value="0" class="easyui-numberbox" data-options="required:true, min:0" validType="tinChi['#tong_so_tc']" placeholder="nhập số >= 0">
			</div>
			<div class="fitem" style="text-shadow: 2px 2px 2px #ccc;">
				<span id="maMessage" style="color: red;"></span>
			</div>
		</form>
	</div>
	
	<div id="dlg-buttons-Add">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveAddObject()">Lưu</a> 
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlgAdd').dialog('close')">Hủy Bỏ</a>
	</div>
</body>
</html>